<template>
  <div class="shipment">
    <Aside />
    <!-- 主体部分 -->
    <main>
      <Nav />
      <div class="top">
        <History />
      </div>
      <div class="content">
        <div class="center">
          <span class="name">Summary</span>
          <table class="left">
            <div class="header">
              <span class="title">List</span>
              <el-select v-model="value" class="m-1" placeholder="Select">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select v-model="value" class="m-2" placeholder="Select">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select v-model="value" class="m-3" placeholder="Select">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-link type="primary" @click="exportClick()">Download</el-link>
              <el-button type="primary" size="small" @click="dialogVisible = true">Add</el-button>

              <!-- add弹窗 -->
              <el-dialog
                v-model="dialogVisible"
                title="Tips"
                width="30%"
                :before-close="handleClose"
              >
                <div class="addBody">
                  <p class="item">
                    <span>No.</span>
                    <el-input v-model="input" placeholder="Please input" clearable />
                  </p>
                  <div class="item">
                    <span>Date</span>
                      <div class="block">
                        <el-date-picker
                          style="width:196px"
                          v-model="value1"
                          type="date"
                          placeholder="Pick a day"
                          :size="size"
                          :shortcuts="shortcuts"
                          :disabled-date="disabledDate"
                        />
                      </div>
                  </div>
                  <p class="item">
                    <span>Way</span>
                    <el-input v-model="input" placeholder="Please input" clearable />
                  </p>
                  <p class="item">
                    <span>Fee</span>
                    <el-input v-model="input" placeholder="Please input" clearable />
                  </p>
                  <p class="item">
                    <span>Doc.</span>
                    <el-input v-model="input" placeholder="Please input" clearable />
                  </p>
                  <p class="item">
                    <span>AWB</span>
                    <el-input v-model="input" placeholder="Please input" clearable />
                  </p>
                  <p class="item">
                    <span>CNT</span>
                    <el-input v-model="input" placeholder="Please input" clearable />
                  </p>
                  <p class="item">
                    <span>Action</span>
                    <el-input v-model="input" placeholder="Please input" clearable />
                  </p>
                </div>
                <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                      Confirm
                    </el-button>
                  </span>
                </template>
              </el-dialog>
            </div>
            <ul class="myList" ref="export">
              <li class="item">
                <span class="title">NO.</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
              </li>
              <li class="item">
                <span class="title">Date</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
              </li>
              <li class="item">
                <span class="title">Way</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
              </li>
              <li class="item">
                <span class="title">Fee</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
              </li>
              <li class="item">
                <span class="title">Doc.</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
              </li>
              <li class="item">
                <span class="title">AWB</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
              </li>
              <li class="item">
                <span class="title">CNT</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
              </li>
              <li class="item">
                <span class="title">Action</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
                <span class="number">3152541</span>
              </li>
            </ul>
          </table>
          <div class="right">
            <div class="header">
              <p class="item">
                <span class="title">PI</span>
                <span class="msg">KE224562585</span>
                <span class="msg">KE224562585</span>
                <span class="msg">KE224562585</span>
                <span class="msg">KE224562585</span>
                <span class="msg">KE224562585</span>
                <span class="msg">KE224562585</span>
                <span class="msg">KE224562585</span>
              </p>
              <p class="item">
                <span class="title">MODEL</span>
                <span class="msg">KE224562585</span>
                <span class="msg">KE224562585</span>
                <span class="msg">KE224562585</span>
                <span class="msg">KE224562585</span>
                <span class="msg">KE224562585</span>
                <span class="msg">KE224562585</span>
                <span class="msg">KE224562585</span>
              </p>
              <p class="item">
                <span class="title">QTY</span>
                <span class="msg">KE224562585</span>
                <span class="msg">KE224562585</span>
                <span class="msg">KE224562585</span>
                <span class="msg">KE224562585</span>
                <span class="msg">KE224562585</span>
                <span class="msg">KE224562585</span>
                <span class="msg">KE224562585</span>
              </p>
            </div>
            <div class="middle">
              <p class="item">
                <span class="title">CARTON</span>
                <span class="msg">1 of 3</span>
                <span class="msg">1 of 3</span>
                <span class="msg">1 of 3</span>
              </p>
              <p class="item">
                <span class="title">SIZE</span>
                <span class="msg">1 of 3</span>
                <span class="msg">1 of 3</span>
                <span class="msg">1 of 3</span>
              </p>
              <p class="item">
                <span class="title">NET(kg)</span>
                <span class="msg">30.15</span>
                <span class="msg">30.15</span>
                <span class="msg">30.15</span>
              </p>
              <p class="item">
                <span class="title">GROSS(kg)</span>
                <span class="msg">30.15</span>
                <span class="msg">30.15</span>
                <span class="msg">30.15</span>
              </p>
            </div>
            <div class="bottom">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
                alt=""
              />
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
                alt=""
              />
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
                alt=""
              />
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
                alt=""
              />
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
                alt=""
              />
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
                alt=""
              />
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
                alt=""
              />
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
                alt=""
              />
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
                alt=""
              />
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
                alt=""
              />
            </div>
          </div>
        </div>
        <!-- 聊天区域 -->
        <div class="IM">
          <!-- 右边 -->
          <div class="right">
            <div class="consult flex aic">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
                alt=""
              />
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
                alt=""
              />
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
                alt=""
              />
            </div>

            <div class="info pl-10 pr-10 f14">
              <div class="flex mt-20">
                <img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
                  alt=""
                />
                <p class="what ml-10 mt-10">芊妙机器人</p>
              </div>
              <div class="flex mt-20 jc-e">
                <p class="what mr-10 mt-10">芊妙机器人</p>
                <img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
                  alt=""
                />
              </div>
              <div class="flex mt-20">
                <img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
                  alt=""
                />
                <p class="what ml-10 mt-10">芊妙机器人</p>
              </div>
            </div>

            <div class="chat pl-10 pr-10 flex fdc">
              <el-input
                v-model="chat"
                :autosize="{ minRows: 5, maxRows: 4 }"
                type="textarea"
                placeholder="please enter"
              />
              <el-button class="mt-10 flex jc-e" type="primary" round
                >dispatch</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Nav from "../components/Nav.vue";
import Aside from "../components/Aside.vue";
import History from "../components/History.vue";

//下载 xlsx 和file-saver两个包
//组件中引入
// import XLXS from "xlsx";
import FileSaver from "file-saver";

const exportClick = () => {
  // 导出文件名
  const filename = "导出.xlsx";
  // 导出表格加id,通过id获取要导出的表单
  const a = XLXS.utils.table_to_book(document.getElementById("table"));
  const b = XLXS.write(a, {
    bookType: "xlsx",
    bookSST: true,
    type: "array",
  });
  try {
    FileSaver.saveAs(
      new Blob([b], {
        type: "application/octet-stream",
      }),
      filename
    );
  } catch (e) {
    console.log(e);
  }
  return b;
};

// add弹窗
const dialogVisible = ref(false)

// 弹窗里面的日期选择
const value1 = ref('')

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const disabledDate = (time) => {
  return time.getTime() > Date.now()
}

const value = ref("");

const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
</script>

<style lang="less" scoped>
@import "./css/shipment.less";
</style>